import React, { Component } from 'react';

import { connect } from 'dva';
import {
  Card,
  Skeleton,
  Row,
  Col,
  Divider,
  Table
} from 'antd';

import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../Less/AdvancedProfile.less';

const { Description } = DescriptionList;



@connect(({ goods, profile, loading }) => ({
  goods,
  profile,
  loading: loading.effects['profile/fetchOrderInfo'],
  goodsLoading: loading.effects['goods/fetchGoodsInfo'],
}))


class OrderProfile extends Component {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'profile/fetchOrderInfo',
      payload: params.orderid,
    });
    dispatch({
      type: 'goods/fetchGoodsInfo',
      payload: 208,
    })
  }

  render() {
    const { goods, profile, loading, goodsLoading } = this.props;
    const { orderInfo, consignee } = profile;
    const { goodsInfo } = goods;
    const columns=[
      {
        title: '发货编号',
        dataIndex:'id'
      },
  
      {
        title: '用户类别',
        dataIndex: 'type',

      },
      {
        title: 'vip等级',
        dataIndex: 'vip_level',
      },
      {
        title: '物流编号',
        dataIndex: 'isblack',
     
      },
      {
        title: '送货时间',
        dataIndex: 'agenttime',
  
      },
      {
        title: '操作员',
  
      },
    ]
    return (
      <PageHeaderWrapper
        title="单号：234231029431"
        logo={
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
        }

      >

        <Card title="订单详情" style={{ marginBottom: 24 }} bordered={false}>
          <Skeleton loading={loading} active rows={4}>
            <DescriptionList style={{ marginBottom: 24 }} title={<b>订单信息</b>}>
              <Description term="编号">{orderInfo.ordersn}</Description>
              <Description term="合同编号">{orderInfo.order_agreement ? orderInfo.order_agreement[0].agreementno : ''}</Description>
              <Description term="合同生成时间">{orderInfo.order_agreement ? orderInfo.order_agreement[0].created_at : ''}</Description>
              <Description term="备注">这是葡萄苗的备注</Description>
            </DescriptionList>
            <Divider style={{ marginBottom: 32 }} />
            <DescriptionList style={{ marginBottom: 24 }} title={<b>收货人信息</b>}>
              <Description term="收货人姓名">{consignee.realname}</Description>
              <Description term="联系方式">{consignee.mobile}</Description>
              <Description term="联系地址">
                {consignee.province + consignee.city + consignee.address}
              </Description>
            </DescriptionList>
          </Skeleton>
        </Card>

        <Card title="商品信息" style={{ marginBottom: 24 }} bordered={false}>
          <Skeleton loading={goodsLoading} active rows={4}>
            <Row gutter={16}>
              <Col span={2}>
                <img className={styles.goodImg} src={`https://lgjmall.lgjpt.com/attachment/${goodsInfo.thumb}`} alt='商品图片' />
              </Col>
              <Col span={4}>
                <h4>{goodsInfo.title}</h4>
                <h4>单价:￥{goodsInfo.marketprice}</h4>
              </Col>
            </Row>
            <Divider style={{ marginBottom: 32 }} />
            <Table
              columns={columns}
            />
          </Skeleton>
        </Card>

      </PageHeaderWrapper>
    );
  }
}

export default OrderProfile;
